import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import './app-visual-date-picker.less';

/**
 * @description 虚拟表单时间选择器
 * @export
 * @class AppVisualDatePicker
 * @extends {Vue}
 */
@Component({})
export class AppVisualDatePicker extends Vue {

  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualDatePicker
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualDatePicker
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualDatePicker
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualDatePicker
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualDatePicker
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualDatePicker
   */
  @Prop() realCompRef!: any;

  /**
   * @description 输入框类型
   * @type {string}
   * @memberof AppVisualDatePicker
   */
  public type: string = 'date';

  /**
   * @description 生命周期初始化
   * @memberof AppVisualDatePicker
   */
  public created() {
    switch (this.editorInstance?.editorType) {
      // 时间选择控件_无小时
      case 'DATEPICKEREX_NOTIME':
      // 时间选择控件_小时
      case 'DATEPICKEREX_HOUR':
        this.type = 'date';
        break;
      // 时间选择控件_无日期
      case 'DATEPICKEREX_NODAY':
      // 时间选择控件_无日期无秒钟
      case 'DATEPICKEREX_NODAY_NOSECOND':
        this.type = 'time';
        break;
      // 时间选择控件
      case 'DATEPICKEREX':
      // 时间选择器(新）
      case 'DATEPICKER':
      // 时间选择控件_分钟
      case 'DATEPICKEREX_MINUTE':
      // 时间选择控件_秒钟
      case 'DATEPICKEREX_SECOND':
      // 时间选择控件_无秒钟
      case 'DATEPICKEREX_NOSECOND':
        this.type = 'datetime-local';
        break;
    }
  }

  /**
   * @description 格式化时间
   * @param {*} value
   * @return {*} 
   * @memberof AppVisualDatePicker
   */
  public formatTime(value: any) {
    const time: Date = new Date(value);
    if (time) {
      return {
        year: time.getFullYear(),
        month: time.getMonth() + 1,
        day: time.getDate(),
        hour: time.getHours() > 9 ? time.getHours() : '0' + time.getHours(),
        min: time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes(),
        seconds: time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds(),
      }
    }
  }

  /**
   * @description 获取当前时间格式
   * @readonly
   * @memberof AppVisualDatePicker
   */
  get getCurTime() {
    if(this.realCompRef.value) {
      const time: any = this.formatTime(this.realCompRef.value);
      switch (this.type) {
        case "datetime-local":
          return `${time.year}-${time.month}-${time.day}T${time.hour}:${time.min}`;
        case "date":
          return `${time.year}-${time.month}-${time.day}`;
        case "time":
          return `${time.hour}:${time.min}`;
      }
    }
  }

  /**
   * @description 值改变
   * @param {string} value
   * @memberof AppVisualDatePicker
   */
  public onChange($event: any) {
    this.$emit('change', { name: this.name, value: $event.target.value.replace("T"," ") });
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualDatePicker
   */
  public render() {
    return (
      <div class={'app-visual-date-picker luckysheet-mousedown-cancel'}>
        <input
          type={this.type}
          class="input__inner luckysheet-mousedown-cancel"
          value={this.getCurTime}
          style={{
            height: `${this.position.height}px`
          }}
          onBlur={($event: any) => { this.onChange($event) }}
        >
        </input>
      </div>
    );
  }
}
